/**
 * 教员评分统计列表
 */
<template>
	<vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="xfsj">
							<template #label><vp-label zh="日期" en="Date"/></template>
							<el-date-picker
								v-model="searchForm.xfsj"
								type="daterange"
								value-format="YYYY-MM-DD"
								unlink-panels
								range-separator="-"
								class="w100"
								:clearable="false"
							>
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="jyxm">
							<template #label><vp-label zh="教员" en="Trainer" /></template>
							<el-input v-model="searchForm.jyxm" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
						<vp-btn-more @change="showMore = $event" />
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #table>
			<vp-vxe-table
				id="teacherEvalStatisticsTable"
				ref="tableRef" 
				:data="tableData" 
				@sort-change="handleSortChange" 
				row-key="id"
				v-loading="loading"
			>	
				<vxe-column field="seq" type="seq" align="center" title="#" width="50" />
				<vxe-column 
					sortable
					field="dabh" 
					title="教员 Trainer"
					show-overflow 
					min-width="140"
				>
					<template #header><vp-label zh="教员" en="Trainer" /></template>
					<template #default="{ row }">
						<el-link @click="handleViewPersonnelFile(row.jydaid)">{{ row.dabh + ' ' + row.jyxm }}</el-link>
					</template>
				</vxe-column>
				<vxe-column 
					field="pfqj" 
					title="评分期间 Scoring Period"
					show-overflow
					min-width="190"
				>
					<template #header><vp-label zh="评分期间" en="Scoring Period" /></template>
					<template #default="{ row }">
						<span>{{ searchForm.xfsj[0] + ' ~ ' + searchForm.xfsj[1] }}</span>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					field="zf" 
					title="总分（平均分） Total Score (Average)"
					show-overflow
					min-width="180"
				>
					<template #header><vp-label zh="总分（平均分）" en="Total Score (Average)" /></template>
					<template #default="{ row }">
						<span>{{ parseFloat((row.zf / row.pfcs).toFixed(2)) }}</span>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					field="pfcs" 
					title="评分次数 Eval. Count"
					show-overflow
					min-width="180"
				>
					<template #header><vp-label zh="评分次数" en="Eval. Count" /></template>
				</vxe-column>
				<vxe-column 
					field="operation" 
					title="操作 Operation"
					fixed="right" 
					width="100"
				>
					<template #header><vp-label-operations/></template>
					<template #default="scope">
						<vp-btn-view text @click="viewDetail(scope.row.jydaid)"/>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<template #pagination>
			<vp-pagination
				@change="loadDataList"
				:total="page.total" 
				v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize"
			>
			</vp-pagination>
		</template>

		<StatisticsDetailDialog ref="statisticsDetailDialogRef" @formSubmited="loadDataList"></StatisticsDetailDialog>
	</vp-main-page>
</template>
<script setup lang="ts" name="teacherEvalStatisticsTab">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue'
import request from '/@/utils/request';
import { useRouter } from 'vue-router';
import { DEFAULT_PAGE } from '/@/utils/page';
import { ElMessage } from 'element-plus';

const StatisticsDetailDialog = defineAsyncComponent(() => import('./StatisticsDetailDialog.vue'));

const searchForm = reactive({
	xfsj: [new Date().getFullYear() + '-01-01', new Date().getFullYear()+ '-12-31'],
	jyxm: "",
});

const page = reactive({
	...DEFAULT_PAGE,
})

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

const router = useRouter();

// 加载列表数据
const loadDataList = () => {
	if (!searchForm.xfsj || searchForm.xfsj.length !== 2) {
		ElMessage.error("请先选择日期");
	}
	loading.value = true;
	request.get('/training/teacherEvalStatistics/statistics/list', {
		params: {
			...searchForm,
			...page,
		}
	}).then(res => {
		tableData.value = res?.data?.list || [];
		page.total = res?.data?.total || 0;
		page.pageNum = res?.data?.pageNum || 1;
	}).finally(()=>{
		loading.value = false;
	})
}

const searchFormRef = ref();
// 重置搜索条件
const handleSearchReset = ()=>{
	searchFormRef.value.resetFields();
}

// 列表字段排序
const handleSortChange = (column: any)=>{
	page.sortColumn = column.field;
	page.sortOrder = column.order;
	loadDataList()
}

onMounted(() => {
	loadDataList();
})

const tableRef = ref();

// 查看人员档案
const handleViewPersonnelFile = (id: string) => {
	router.push({
		name: "viewTrainingPersonnelFile",
		params: {
			id: id,
		},
	})
}

// 查看明细
const statisticsDetailDialogRef = ref();
const viewDetail = (jydaid: string) => {
	statisticsDetailDialogRef.value.handleOpen({
		jydaid: jydaid,
		xfsj: searchForm.xfsj
	});
}

</script>

<style scoped lang="scss">
</style>